<!doctype html>
<html>

	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<style type="text/css">
		.contract-close #btnCloseContract.mui-btn {
			width: 100%;
			font-size: 17px;
			border-width: 0;
			border-radius: 0;
		}
		
		.contract-close .mui-table-view-cell {
			padding: 15px 15px;
		}
		
		.contract-close .mui-table-view-cell:after {
			left: 0;
		}
		
		.contract-close p {
			font-size: 12px;
		}
		
		.contract-close .prices span {
			padding: 0 5px;
		}
		
		.contract-close .mui-table-view-cell.mui-active {
			background-color: inherit;
		}
		
		.contract-close .mui-table {
			padding: 0;
		}
	</style>
	</head>

	<body>
		<div class="mui-content contract-close">
			<total-pay amount="123.22"></total-pay>
			<div v-html="(123.55)"></div>
			<div v-for="item in list" :title="'this is ' + item.Title">{{item.ID}}</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/parseTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/resources.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iconfont.js"></script>
		<script type="text/javascript">
    
			format = function (v) {
				return v + 'a';
			}
			
			mui.init();
			var data = [{
					"ID": "1",
					"Title": "恭喜用户 135****1235 成功循环还款10000元"
				},
				{
					"ID": "2",
					"Title": "恭喜用户 189****8585 成功循环还款8500元"
				},
				{
					"ID": "3",
					"Title": "恭喜用户 133****4455 成功循环还款15000元"
				}
			];

			var vm = new Vue({
				el: '.mui-content',
				data: {
					list: data
				},
				components: { 
					"total-pay":{
						props:['amount'],
						template:"<span v-html='format()'></span>",
						methods:{
							format:function () {
								var integer = this.amount.substr(0,this.amount.indexOf("."));
								integer = integer == "" ? this.amount : integer;
								return this.amount.replace(integer, "<b>"+integer+"</b>");
							}
						}
					}
				},
				created:function(){
					console.log(data);
				}
			});
			
			console.log(formatAmount(123.99));
			
		</script>
	</body>

</html>